<template>
    <div>
        <table>
            <thead>
            <tr>
                <td></td>
            </tr>
            </thead>
        </table>
        <div class="file-list">
            <table>
                <tbody>
                <tr v-for="(file,key) in uploadFilesList" :key="key">
                    <td v-text="file.name"></td>
                    <td v-text="file.time"></td>
                    <td v-text="file.status"></td>
                    <td v-text="file.percent"></td>
                    <td v-text="file.speed"></td>
                    <td>
                        <a class="pointer" @click="editTask(file,'pause')">暂停</a>
                        <a class="pointer" @click="editTask(file,'restart')">继续</a>
                        <a class="pointer" @click="editTask(file,'cencel')">取消</a>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</template>

<script>
  export default {
    name: "uploadList",
    data() {
      return {
        uploadFilesList: []
      }
    },
    created() {
      this.uploadFilesList = this.$ipcRenderer.sendSync('getUploadFilesList')
    },
    methods: {
      checkStatus:function(){
      },
      editTask: function (fileData, status) {
        this.$ipcRenderer.send('editUploadTask', {
          fileData: fileData,
          status: status
        })
      },
    }
  }
</script>

<style scoped>
    .file-list {
        width: 100%;
    }

    .file-list table {
        width: 100%;
    }

    .file-list table td {
        text-align: center;
        line-height: 30px;
    }
</style>
